<template>
  <div>
    <canvas ref="myCanvas" :width="props.width" :height="props.height"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  msg: String,
  width: Number,
  height: Number
});
const myCanvas = ref();
onMounted(() => {
  // 假设的文件后缀名
  const fileExtension = ".js";

  // 获取canvas元素和上下文
  const canvas = myCanvas.value;
  const ctx = canvas.getContext("2d");

  // 清除之前的绘制（如果有的话）
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制文件图标（这里用一个简单的矩形表示）
  ctx.fillStyle = "#4CAF50"; // 假设的文件图标颜色
  ctx.fillRect(10, 10, 130, 80); // 绘制一个更大的矩形以便更容易看到

  // 绘制文件后缀名
  ctx.fillStyle = "black"; // 确保文字颜色清晰
  ctx.font = "5px Arial"; // 使用稍大的字体
  ctx.textAlign = "left"; // 文本左对齐

  // 计算文本位置（确保它在矩形旁边）
  ctx.measureText(fileExtension).width;

  // 绘制文本
  ctx.fillText(fileExtension, 0, 0);

  // 可选：在控制台中输出确认信息
  console.log("File extension text drawn on canvas:", fileExtension);
});
</script>
